<template>
  <a-modal :visible="visible" class="batchAddStaffModal" :centered="true" :footer="null" :closable="false" :destroyOnClose="true" :maskClosable="false" width="480px" @cancel="closeModal(false)">
    <div class="modalBody">
      <div class="modalHeader">
        上传Excel匹配表头
        <!-- <img src="./images/closeModalImg.svg" alt="关闭" @click="closeModal(false)"> -->
      </div>
      <batch-add-staff-modal-body @closeModal="closeModal"></batch-add-staff-modal-body>
    </div>
  </a-modal>
</template>

<script setup>
import BatchAddStaffModalBody from './BatchAddStaffModalBody.vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:visible', 'closeModal'])

const closeModal = (info) => {
  emit('closeModal', info)
}
</script>

<style lang="less" scoped>
.batchAddStaffModal {
  .modalBody {
    padding: 36px 32px 32px;
    .modalHeader {
      position: relative;
      line-height: 40px;
      font-size: 20px;
      color: #000000;
      font-weight: bold;
      margin-bottom: 32px;
      img {
        position: absolute;
        right: 0px;
        width: 40px;
        padding: 8px;
        cursor: pointer;
      }
    }
  }
}
</style>

<style lang="less">
.batchAddStaffModal {
  .ant-modal-content {
    border-radius: 16px;
    .ant-modal-body {
      padding: 0px;
    }
  }
}
</style>
